<template>
	<div class="carousel">
		<div class="ov-hi">
			<ul class="showimg" ref="imgMargin">
			<template v-for='(sd, index) in shufflingData'>
				<li v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'>
					<a target="_blank" v-bind:title="sd.title" class="img" v-bind:href="sd.href"><img v-bind:alt="sd.title" v-bind:src="sd.url" /></a>
				</li>
			</template>
		</ul>
		</div>
		
		<!--<div class='bullet-nav'>
			<div class="bullet-box">
				&nbsp;
				<a class="bullet" v-for='(sd, index) in shufflingData' v-bind:class="{'active': shufflingId==index}" v-on:mouseover='bulletFun(index)'></a>
				&nbsp;
			</div>
		</div>-->
		<div  class="preNext pre" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='preFun'></div>
		<div  class="preNext next" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='nextFun'></div>
	</div>
</template>

<script>
	export default {
		components: {},
		mounted: function() {
			var _this = this;
			var timer = setInterval(function() {
				if(_this.shufflingId >= 0 && _this.shufflingId < _this.shufflingData.length - 1) {
					_this.shufflingId = parseInt(_this.shufflingId) + 1;
				} else if(_this.shufflingId == _this.shufflingData.length - 1) {
					_this.shufflingId = 0;
				}
			}, 5000)
		},
		methods: {
			bulletFun: function(index) {
				this.shufflingId = index;
			},
			showPreNext: function() {
				this.PreNext = true;
			},
			hiddenPreNext: function() {
				this.PreNext = false;
			},
			preFun: function() {
				var _this = this;
				if(_this.shufflingId > 0 && _this.shufflingId < _this.shufflingData.length) {
					_this.shufflingId = parseInt(_this.shufflingId) - 1;
				}
			},
			nextFun: function() {
				var _this = this;
				if(_this.shufflingId >= 0 && _this.shufflingId < _this.shufflingData.length - 1) {
					_this.shufflingId = parseInt(_this.shufflingId) + 1;
				}
			}
		},
		data() {
			return {
				shufflingData: [{
						title: '喵来个米',
						href: '1',
						url: 'static/banner_small_1.png',
						//						url: 'http://static.udz.com/uploads/2017/3/7/869995198182180.jpg',
					},
					{
						title: '豆豆',
						href: '2',
						url: 'static/banner_small_2.png',
						//						url: 'http://static.udz.com/uploads/2017/3/7/869995198182180.jpg',
					}, {
						title: '猫咪咪',
						href: '3',
						url: 'static/banner_small_3.png',
						//						url: 'http://static.udz.com/uploads/2017/3/7/869995198182180.jpg',
					}
				],
				shufflingId: 0,
				PreNext: false,
			}
		},
		watch:{
			shufflingId: function(newId){
				this.$refs.imgMargin.style.marginLeft= -1060 * newId +"px";
			},
		},
	}
</script>

<style scoped lang="less" stylesheet="less">
	.carousel {
		position: relative;
		/*overflow: hidden;*/
		height: 220px;
		max-width: 1060px;
		margin: 0 auto;
		.ov-hi{
			overflow: hidden;
			
		}
		.showimg {
			/*overflow: hidden;*/
			transition: all 0.5s linear;
			width: 19200px;
			margin-left: 0px;
			left: -0px;
			li {
				float: left;
				img {
					display: block;
					height: 220px;
					width: 1060px;
				}
			}
		}
		.bullet-nav {
			position: absolute;
			bottom: 0px;
			width: 100%;
			text-align: center;
			overflow: hidden;
			.bullet-box {
				display: inline-block;
				height: 20px;
				line-height: 20px;
				border-radius: 20px;
				background-color: rgba(0, 0, 0, 0.2);
				.bullet {
					display: inline-block;
					background: gray;
					width: 12px;
					height: 12px;
					border-radius: 6px;
					-webkit-border-radius: 6px;
					margin-right: 5px;
					margin: 5px;
					opacity: 0.5;
					transition: opacity 3s linear;
					&.active {
						background-color: white;
						opacity: 1;
						cursor: pointer;
					}
				}
			}
		}
	}
	
	.preNext {
		display: block;
		width: 20px;
		height: 20px;
		position: absolute;
		top: 100px;
		cursor: pointer;
	}
	.pre {
		background: url('../assets/arrow.png') no-repeat;
		left: -100px;
	}
	
	.next {
		background: url('../assets/arrow.png') no-repeat center bottom;
		right: -100px;
	}
	
	* {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
</style>